<template>
    <div style="height: 100%;display: flex;justify-content: center; background-color: #f5f5f5;">
        <a-card style="width: 30%;height: 60%;background-color: #fff;margin-top: 8%;">

            <h2 style="text-align: center;font: 700 32px 微软雅黑;margin: 5% 0 15% 0;line-height: 0.75em;">
                GTenACGN
                <br />
                <span style="font:400 18px 微软雅黑;">后台管理站点</span>
            </h2>

            <a-form :model="formState" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }"
                @finish="loginSubmit" @finishFailed="() => message.error('请检查填写是否完整')">

                <a-form-item label="账号" name="username" :rules="[{ required: true, message: '必填项' }]">
                    <a-input v-model:value="formState.username" placeholder="请输入管理员账号" />
                </a-form-item>

                <a-form-item label="密码" name="password" :rules="[{ required: true, message: '必填项' }]">
                    <a-input-password v-model:value="formState.password" placeholder="请输入密码" />
                </a-form-item>

                <a-form-item :wrapper-col="{ offset: 3 }">

                    <a-checkbox v-model:checked="formState.remember">自动登录</a-checkbox>

                    <a @click="reset" style="margin-left: 40%;">重置输入</a>
                </a-form-item>

                <a-form-item :wrapper-col="{ offset: 3, span: 17 }" style="margin-top: 20px;">
                    <a-button type="primary" html-type="submit" style="width: 100%;height: 40px;"
                        :loading="loginLoading">登录</a-button>
                </a-form-item>

            </a-form>


        </a-card>

    </div>
</template>


<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { MD5 } from 'crypto-js'
import { message } from 'ant-design-vue';
import { HttpStatusCode } from 'axios';
import useBaseStore from '@/stores/baseStore.ts'
import { api } from '@/myAxios';

const baseStore = useBaseStore();
const loginLoading = ref(false);

onMounted(() => {
    baseStore.loadToken();
    autoLogin();
})

const formState = ref({
    username: '',
    password: '',
    remember: true,
})

function reset() {
    formState.value = {
        username: '',
        password: '',
        remember: false,
    }
}

async function loginSubmit() {
    loginLoading.value = true;

    try {
        const data = {
            name: formState.value.username,
            password: MD5(formState.value.password).toString(),
        }

        let result = await api.post('/admin/login', data);

        if (result.data.code === HttpStatusCode.Ok) {
            // 获取token
            const token = result.data.data;
            baseStore.setToken(token);
            // 通过token获取管理员信息
            result = await api.get('/admin/token?token=' + token);
            if (result.data.code === HttpStatusCode.Ok) {
                baseStore.setAdmin(result.data.data);
            }
            // 判断是否是单次登录
            if (!formState.value.remember) {
                baseStore.setToken('');
            } else {
                message.success('已设定自动登录');
            }

            message.success('登录成功');
        } else {
            message.error('登录失败');
        }
    } catch (error: any) {
        console.log(error);
        if (error.response.status === HttpStatusCode.InternalServerError) {
            message.error('与服务通信异常');
            return;
        }
        message.error('登录失败');
    } finally {
        loginLoading.value = false;
    }



}

async function autoLogin() {
    if (baseStore.getToken === '') {
        return;
    }
    const result = await api.post('/admin/token', baseStore.getToken)
    if (result.data.code === HttpStatusCode.Ok) {
        baseStore.setAdmin(result.data.data);
        message.success('自动登录成功');
        // baseStore.getRoute
        console.log(baseStore.getRoute);

    } else if (result.data.code === HttpStatusCode.Unauthorized) {
        message.info('token过期，请重新登录');
        baseStore.setToken('');
        baseStore.setAdmin(null)
        console.log('token过期');
    }

}


</script>

<style scoped>
.login-form-button {
    width: 100%;
}
</style>